<template>
  <div class="wrong-questions-container">
    <!-- 顶部统计卡片 -->
    <div class="statistics-cards">
      <a-row>
        <a-col :span="24">
          <a-card class="stat-card total-wrong">
            <template #title>
              <a-icon type="warning" theme="filled" />
              <span>错题总数</span>
            </template>
            <div class="stat-number">{{ totalWrong }}</div>
            <div class="stat-trend">
              <span>继续加油哦</span>
             
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 错题列表 -->
    <div class="questions-list">
      <div class="list-header">
        <div class="header-left">
          <h2>错题列表</h2>
          <a-tag color="blue">共 {{ totalWrong }} 道</a-tag>
        </div>
      </div>

      <!-- 错题卡片列表 -->
      <a-list
        :grid="{ gutter: 24, xs: 1, sm: 1, md: 2, lg: 2, xl: 2, xxl: 2 }"
        :data-source="questionsList"
        :pagination="{
          total: totalWrong,
          current: current,
          pageSize: 10,
          showTotal: total => `共 ${total} 条`,
          showQuickJumper: true,
          showSizeChanger: false,
          onChange: handlePageChange
        }"
        :loading="loading"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card class="question-card" :hoverable="true">
            <template #title>
              <div class="card-title">
                <span class="question-title">{{ item.subjectName }}</span>
                <a-tag :color="getDifficultyColor(item.subjectLevel)">
                  {{ item.subjectLevelName }}
                </a-tag>
              </div>
            </template>
            <template #extra>
              <a-button type="link" @click="startPractice(item.id)">
                开始练习
              </a-button>
            </template>
            <div class="card-content">
              <div class="question-info">
                <div class="question-tags">
                  <a-tag color="cyan">{{ item.categoryName }}</a-tag>
                  <a-tag color="blue">{{ item.subjectTypeName }}</a-tag>
                </div>
              </div>
              <div class="question-stats">
                <div class="stat-item">
                  <a-icon type="clock-circle" />
                  <span>答题时间: {{ formatDate(item.recordTime) }}</span>
                </div>
                <a-button type="link" @click="showDetail(item)">查看详情</a-button>
              </div>
            </div>
          </a-card>
        </a-list-item>
      </a-list>
    </div>

    <!-- 详情对比弹窗 -->
    <a-modal
      v-model="detailVisible"
      title="答题详情"
      width="80%"
      :footer="null"
      :destroyOnClose="true"
    >
      <div class="answer-comparison">
        <div class="comparison-section">
          <h3>我的答案</h3>
          <div class="markdown-content">
            <v-md-preview :text="currentDetail.recordAnswer" />
          </div>
        </div>
        <div class="comparison-section">
          <h3>正确答案</h3>
          <div class="markdown-content">
            <v-md-preview :text="currentDetail.rightAnswer" />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import request from '@/utils/request'
import VMdPreview from '@kangc/v-md-editor/lib/preview'
import '@kangc/v-md-editor/lib/style/preview.css'
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import '@kangc/v-md-editor/lib/theme/style/github.css'

// 配置markdown主题
VMdPreview.use(githubTheme)

export default {
  name: 'WrongQuestions',
  components: {
    VMdPreview
  },
  data() {
    return {
      // 统计数据
      totalWrong: 0,
      weekTrend: -5,

      // 列表相关
      loading: false,
      questionsList: [],
      current: 1,

      // 详情弹窗
      detailVisible: false,
      currentDetail: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await request.post('/subject/info/queryErrorSubject', {
          page: this.current,
          pageSize: 10
        })
        
        if (res.code === 200) {
          this.questionsList = res.content.list || []
          this.totalWrong = parseInt(res.content.total || 0)
        }
      } catch (error) {
        this.$message.error('获取错题列表失败')
      } finally {
        this.loading = false
      }
    },
    handlePageChange(page) {
      this.current = page
      this.fetchData()
    },
    startPractice(id) {
      this.$router.push(`/practice/${id}`)
    },
    getDifficultyColor(level) {
      const colors = {
        '0': 'green',  // 入门
        '1': 'blue',   // 初级
        '2': 'orange', // 中级
        '3': 'red',    // 高级
        '4': 'purple'  // 地狱
      }
      return colors[level] || 'blue'
    },
    formatDate(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    showDetail(item) {
      this.currentDetail = item
      this.detailVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.wrong-questions-container {
  padding: 24px;
  background: #f0f2f5;

  .statistics-cards {
    margin-bottom: 24px;

    .stat-card {
      .ant-card-head {
        min-height: 40px;
        padding: 0 16px;
        .ant-card-head-title {
          padding: 8px 0;
          .anticon {
            margin-right: 8px;
          }
        }
      }

      .stat-number {
        font-size: 36px;
        font-weight: bold;
        margin: 16px 0;
        text-align: center;
        color: #1890ff;
      }

      .stat-trend {
        color: #8c8c8c;
        text-align: center;
        .up { color: #f5222d; }
        .down { color: #52c41a; }
      }
    }
  }

  .questions-list {
    background: #fff;
    padding: 24px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f0f0f0;

      .header-left {
        display: flex;
        align-items: center;
        h2 {
          margin: 0;
          margin-right: 16px;
          font-size: 20px;
          color: #262626;
        }
      }
    }

    .question-card {
      margin-bottom: 16px;

      .card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .question-title {
          font-weight: 500;
          margin-right: 8px;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .card-content {
        .question-tags {
          margin-bottom: 16px;
          display: flex;
          gap: 8px;
        }

        .question-stats {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #8c8c8c;
          font-size: 12px;

          .stat-item {
            .anticon {
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
}

// 详情弹窗样式
.answer-comparison {
  .comparison-section {
    margin-bottom: 24px;

    h3 {
      font-size: 16px;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }

    .markdown-content {
      padding: 16px;
      background: #fafafa;
      border-radius: 4px;
      max-height: 400px;
      overflow-y: auto;
    }
  }
}

:deep(.v-md-editor) {
  border: none !important;
  background: transparent !important;
}
</style> 